$('.agree').click(function () {
  $('.murkBox').css('display', 'none')
})
$('.closeBtn').click(function () {
  location.href = 'index.html'
})
let regRex =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
let userReg = /^\w{6,12}$/
let passReg = /^\w{6,12}$/
let regflag = false
let imgflag = false
let codeflag = false
let userflag = false
let passflag = false
let regCode = null
let username = null
let pass2flag = false
//手机输入验证
$('#username').change(function () {
  let username = $(this).val()
  if (username == '') {
    this.blur()
    regflag = false
    $('.error').css({ display: 'none' })
    $('.hint').html('验证完成之后你可以使用该手机号登录或找回密码')
    $('.i-error').css('background-position', ' 0px -100px')
  } else {
    if (regRex.test(username)) {
      regflag = true
      $('.i-status').css('display', 'block')
      $('.error').css({ display: 'none', color: '#ccc' })
    } else {
      $('.i-status').css('display', 'none')
      regflag = false
      $('.error').css({ display: 'block', color: '#f91' })
      $('.hint').html('格式错误')
      $('.i-error').css('background-position', ' -17px -100px')
    }
  }
})
//点击按钮进行验证 按钮的事件
$('.testBtn').click(function () {
  if (!regflag) {
    $('.error').css({ display: 'block', color: '#f91' })
    $('.hint').html('请验证')
    $('.i-error').css('background-position', ' -17px -100px')
    return false
  } else if (regflag) {
    $('.regSlidelmageBox').css({ display: 'block' })
    $('.error').css({ display: 'none', color: '#ccc' })
    $('.hint').html('验证完成之后你可以使用该手机号登录或找回密码')
    $('.i-error').css('background-position', ' 0px -100px')
  }
})
//下一步按钮验证事件
$('.codeRegBtn').click(function () {
  if (regCode == $('#codeReg').val()) {
    codeflag = true
  } else {
    codeflag = false
  }
  console.log(regflag, imgflag, codeflag)
  if (!regflag) {
    $('.error').css({ display: 'block', color: '#f91' })
    $('.hint').html('请输入手机号')
    $('.i-error').css('background-position', ' -17px -100px')
  } else if (regflag == true && imgflag == false) {
    $('.t-error').css({ display: 'block', color: '#f91' })
    $('.thint').html('请验证')
    $('.ti-error').css('background-position', ' -17px -100px')
  } else if (regflag == true && imgflag == true && codeflag == false) {
    $('.t3-error').css({ display: 'block', color: '#f91' })
    $('.t3hint').html('请验证验证码').css('color', '#f91')
    $('.t3i-error').css('background-position', ' -17px -100px')
  } else if (regflag && imgflag && codeflag) {
    username = $('#username').val()
    $('.t-error').css({ display: 'none', color: '#ccc' })
    $('.thint').html('请验证')
    $('.ti-error').css('background-position', ' 0 -100px')
    $('.reg1-box').css('display', 'none')
    $('.reg2-box').css('display', 'block')
    $('.main-con-header-left>span')
      .css({ 'background-position': ' 0px 0px', color: '#fff' })
      .html('')
    $('.main-con-header-con>span').css({
      'background-position': ' 0px -200px',
      color: '#fff',
    })
    $('.main-con-header-con>p').addClass('color')
  } else {
    $('.t-error').css({ display: 'block', color: '#f91' })
    $('.thint').html('请验证')
    $('.ti-error').css('background-position', ' -17px -100px')
  }
})
//拼图验证
let mySlideImage = new SlideImageVerify('#slideImageWrap', {
  slideImage: ['image/a1.png', 'image/a2.png', 'image/a3.png'],
  slideAreaNum: 5,
  refreshSlide: true,
  getSuccessState: function (res) {
    if (res) {
      imgflag = true
      $('.regSlidelmageBox').css({ display: 'none' })
      $('.btnBox').css('display', 'none')
      $('.timeOut').css('display', 'block')
      mySlideImage.resizeSlide()
      creatTimer()
      setTimeout(function () {
        alert('验证码为2104')
      }, 1000)
    } else {
      imgflag = false
    }
  },
})
//拼图关闭按钮
$('.close').click(function () {
  $('.regSlidelmageBox').css({ display: 'none' })
  imgflag = false
  location.href = 'index.html'
})
//取消按钮
$('#username')[0].oninput = function () {
  $('.i-cancle').css('display', 'block')
}
//取消按钮 使用mousedown代替click
$('.i-cancle').mousedown(function (e) {
  $('#username')[0].value = ''
  $('.i-cancle').css('display', 'none')
  $('.error').css({ display: 'none', color: '#ccc' })
})
//手机号input失去焦点事件
$('#username')[0].onblur = function () {
  $('.i-cancle').css('display', 'none')
  if (this.value == '') {
    $('txt').css('display', 'inline')
    $('.error').css({ display: 'none', color: '#ccc' })
  }
}
//手机号input获取焦点事件
$('#username')[0].onfocus = function () {
  $('.error').css({ display: 'block', color: '#ccc' })
  $('txt').css('display', 'none')
}
//手机号input placeholder 替代遮罩
$('txt').click(function () {
  $(this).css('display', 'none')
  $('#username').focus()
  setTimeout(function () {
    $('#username')[0].click()
  }, 100)
})
/***************************** */
//发送验证码 button 禁用 显示数字
function creatTimer() {
  let time = 120
  regCode = '2104'
  $('.t3-error').css({ display: 'block' })
  let timer = setInterval(function () {
    time--
    $('.resetRex').attr('disabled', 'disabled')
    $('.resetRex').html(time + 's后重新获取')
    $('.resetRex').css({ color: '#ccc' })
    if (time == 0) {
      regCode = null
      clearTimeout(timer)
      $('.resetRex').removeAttr('disabled')
      $('.resetRex').html('重新获取')
      $('.resetRex').css({ color: '#666' })
      $('.t3-error').css({ display: 'none' })
    }
  }, 1000)
}
//验证码按钮事件
$('.resetRex').click(function () {
  creatTimer()
})
//验证码输入事件
$('#codeReg')[0].oninput = function () {
  $('.ti-cancle').css('display', 'block')
}
$('.ti-cancle').click(function () {
  $('#codeReg')[0].value = ''
})
$('#codeReg')[0].onblur = function () {
  $('.ti-cancle').css('display', 'none')
}
//user注册
$('#user').change(async function () {
  let user = $(this).val()
  if (user == '') {
    this.blur()
    userflag = false
    $('.t2error').css({ display: 'none', color: '#f91' })
    $('.t2hint').html('格式错误')
    $('.t2i-error').css('background-position', '-17px -100px')
    $('.t2i-status').css('display', 'none')
  } else {
    $('.t2i-status').css('display', 'none')
    if (userReg.test(user)) {
      console.log(user)
      await axios
        .get(loginTestUrl, { params: { username: user } })
        .then(function (res) {
          if (res.data.code == 1) {
            userflag = true
            $('.t2i-status').css('display', 'block')
            $('.t2error').css({ display: 'none' })
            $('.t2i-cancle').css('display', 'none')
          } else {
            userflag = false
            $('.t2hint').html('用户名已存在')
            $('.t2error').css({ display: 'block' })
            $('.t2i-error').css('background-position', ' -17px -100px')
          }
        })
    } else {
      $('.t2i-status').css('display', 'none')
      userflag = false
      $('.t2error').css({ display: 'block' })
      $('.t2hint').html('格式错误')
      $('.t2i-error').css('background-position', ' -17px -100px')
    }
  }
})
$('#user')[0].oninput = function () {
  $('.t2i-cancle').css('display', 'block')
  $('.t2i-status').css('display', 'none')
}
$('.t2i-cancle').click(function (e) {
  $('#user')[0].value = ''
  $('.t2i-cancle').css('display', 'none')
  $('.t2error').css({ display: 'none' })
  $('.t2i-status').css('display', 'none')
})
$('#user')[0].onblur = function () {
  $('.t2i-cancle').css('display', 'none')
}

//密码
$('#pass').change(function () {
  let pass = $(this).val()
  if (pass == '') {
    this.blur()
    passflag = false
    $('.perror').css({ display: 'none', color: '#f91' })
    $('.phint').html('格式错误')
    $('.pi-error').css('background-position', '-17px -100px')
    $('.pi-status').css('display', 'none')
  } else {
    $('.pi-status').css('display', 'none')
    if (passReg.test(pass)) {
      passflag = true
      $('.pi-status').css('display', 'block')
      $('.perror').css({ display: 'none' })
      $('.pi-cancle').css('display', 'none')
    } else {
      $('.pi-status').css('display', 'none')
      passflag = false
      $('.perror').css({ display: 'block' })
      $('.phint').html('格式错误')
      $('.pi-error').css('background-position', ' -17px -100px')
    }
  }
})
$('#pass')[0].oninput = function () {
  $('.pi-cancle').css('display', 'block')
  $('.pi-status').css('display', 'none')
}
$('.pi-cancle').click(function () {
  $('#pass')[0].value = ''
  $('.pi-cancle').css('display', 'none')
  $('.perror').css({ display: 'none' })
  $('.pi-status').css('display', 'none')
})
$('#pass')[0].onblur = function () {
  $('.pi-cancle').css('display', 'none')
}

//重复密码
$('#pass2').change(function () {
  let pass2 = $(this).val()
  let pass = $('#pass').val()
  if (pass2 == '') {
    this.blur()
    pass2flag = false
    $('.p2error').css({ display: 'none', color: '#f91' })
    $('.p2hint').html('请输入密码')
    $('.p2i-error').css('background-position', '-17px -100px')
    $('.p2i-status').css('display', 'none')
  } else {
    $('.p2i-status').css('display', 'none')
    if (pass2 == pass) {
      pass2flag = true
      $('.p2i-status').css('display', 'block')
      $('.p2error').css({ display: 'none' })
      $('.p2i-cancle').css('display', 'none')
    } else {
      $('.p2i-status').css('display', 'none')
      pass2flag = false
      $('.p2error').css({ display: 'block' })
      $('.p2hint').html('两次密码不一样')
      $('.p2i-error').css('background-position', ' -17px -100px')
    }
  }
})
$('#pass2')[0].oninput = function () {
  $('.p2i-cancle').css('display', 'block')
  $('.p2i-status').css('display', 'none')
}
$('.p2i-cancle').click(function () {
  $('#pass2')[0].value = ''
  $('.p2i-cancle').css('display', 'none')
  $('.p2error').css({ display: 'none' })
  $('.p2i-status').css('display', 'none')
})
$('#pass2')[0].onblur = function () {
  $('.p2i-cancle').css('display', 'none')
}

//注册按钮事件
$('.regBtn').click(function () {
  console.log(
    'regflag' + regflag,
    'imgflag' + imgflag,
    'codeflag' + codeflag,
    'userflag' + userflag,
    'passflag' + passflag,
    'pass2flag' + pass2flag
  )
  if (regflag && imgflag && codeflag && userflag && passflag && pass2flag) {
    let username = $('#user').val()
    let password = $('#pass').val()
    axios.get(regUrl, { params: { username, password } }).then(function (res) {
      if (res.data.code) {
        setTimeout(function () {
          $('.reg2-box').css('display', 'none')
          $('.reg3-box').css('display', 'block')
          $('.reg3-msg>a').attr('href', 'login.html')
          timeout('页面将在', 's后跳转登录...', 'login.html')
          $('.main-con-header-right>span').css({
            'background-position': ' 0px -200px',
            color: '#fff',
          })
          $('.main-con-header-con>span')
            .css({ 'background-position': ' 0px 0px', color: '#fff' })
            .html('')
          $('.main-con-header-right>p').addClass('color')
        }, 1000)
      } else {
        setTimeout(function () {
          $('.reg2-box').css('display', 'none')
          $('.reg3-box').css('display', 'block')
          $('.reg3-msg>a').attr('href', 'index.html').html('退出注册')
          timeout('页面将在', 's后退出注册...', 'index.html')
          $('.reg3-success>span').css('background-position', '-200px -50px')
          $('.reg3-success>p').html('注册失败')
        }, 1000)
      }
    })
  } else {
    alert('请确认是否填写正确')
    return false
  }
})
//延时器
function timeout(text1, text2, url) {
  let time = 3
  let timer = setInterval(() => {
    if (time == 0) {
      location.href = url
      clearTimeout(timer)
    }
    time--
    $('.reg3-msg>span').html(text1 + time + text2)
  }, 1000)
}
